<template>
  <div class="bussiness" ref="bussiness">
    <portalTab
      :tabData="tabModelData"
      :tabValue="tabValueModelValue"
      @click="clickModelFun"
      :rightTools="false"
    >
      <template :slot="tabValueModelValue">
        <listFilter @getList="getList" :fields="fields" v-if="cIsTabValueModelValue" @rowClick="rowClickFun" :highSearchFile="highSearchFile"></listFilter>
      </template>
    </portalTab>
  </div>
</template>

<script>
import portalTab from "@/components/portalTab";
import listFilter from "@/components/listFilter";
import { axiosGetUserTaskList } from "@/api/home";
export default {
  name: "bussiness",
  components: {
    portalTab,
    listFilter
  },
  data () {
    return {
      tabModelData: [
        { id: 1, label: "业务待办", name: "listFilterToDo" },
        { id: 2, label: "业务已办", name: "listFilterDo" }
      ],
      tabValueModelValue: "listFilterToDo",
      fields: [
        { prop: "name", label: "任务名称", type: "el-input", placeholder: "请输入任务名称" },
        { prop: "type", label: "业务类型", type: "el-input", placeholder: "请输入流程类型" },
        { prop: "state", label: "任务状态" },
        { prop: "authorNo", label: "负责人", type: "el-input", placeholder: "请输入负责人" }
      ],
      highSearchFile: [
        { prop: "name", label: "任务名称", type: "el-input", placeholder: "请输入任务名称" },
        { prop: "type", label: "业务类型", type: "el-input", placeholder: "请输入流程类型" },
        { prop: "state", label: "任务状态", type: "el-input", placeholder: "请输入任务状态"},
        { prop: "authorNo", label: "负责人", type: "el-input", placeholder: "请输入负责人" }
      ]
    };
  },
  computed: {
    cIsTabValueModelValue () {
      let arr = this.tabModelData.map(v => v.name);
      return arr.includes(this.tabValueModelValue);
    }
  },
  methods: {
    clickModelFun (tabValue) {
      this.tabValueModelValue = tabValue;
    },
    getList (index, size, query, cb) {
      const params = {
        current: index,
        size: size,
        state: this.tabValueModelValue === "listFilterToDo" ? 1 : 2
      };
      Object.assign(params, query);
      axiosGetUserTaskList(params).then(res => {
        if (res.data.code === 0) {
          let map = {
            total: res.data.data.total,
            list: res.data.data.records
          };
          cb(map);
        }
      });
    },
    rowClickFun ({row}) {
      console.log(row);
      window.open(row.workItemUrl);
    }
  }
};
</script>

<style lang="less" scoped>
.bussiness {
  height: 100%;
  /deep/ .el-tabs__content {
    height: calc(100% - 40px);
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>